/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("off-canvas") {
    $titon-off-canvas-class-content: generate-class-name($titon-off-canvas, "content");
    $titon-off-canvas-class-sidebar: generate-class-name($titon-off-canvas, "sidebar");
    $titon-off-canvas-class-sidebar-left: generate-class-name($titon-off-canvas, "sidebar", "left");
    $titon-off-canvas-class-sidebar-right: generate-class-name($titon-off-canvas, "sidebar", "right");
    $titon-off-canvas-width: map-get($titon-off-canvas, "width");
    $titon-off-canvas-animations: map-get($titon-off-canvas, "animations");

    #{generate-class-name($titon-off-canvas)} {
        overflow-x: hidden;
        display: flex;
        height: 100%; // html, body, and parent wrapper all require 100% as well
    }

    #{$titon-off-canvas-class-sidebar} {
        flex: none;
        position: fixed;
        overflow: auto;
        top: 0;
        width: $titon-off-canvas-width;
        max-width: 90%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: all map-get($titon-off-canvas, "transition");
        background: #fff;
        will-change: transform;
        -webkit-overflow-scrolling: touch;

        &.is-expanded {
            @extend %placeholder-show;
        }
    }

    #{$titon-off-canvas-class-content} {
        flex: none;
        max-width: 100%;
        z-index: 2;
        transition: all map-get($titon-off-canvas, "transition");
        will-change: transform;
    }

    //-------------------- Modifiers --------------------//

    #{$titon-off-canvas-class-sidebar-left} {
        left: 0;
        transform: translate3d(-100%, 0, 0);

        &.is-expanded {
            transform: translate3d(0, 0, 0) !important;
        }
    }

    #{$titon-off-canvas-class-sidebar-right} {
        right: 0;
        transform: translate3d(100%, 0, 0);

        &.is-expanded {
            transform: translate3d(0, 0, 0) !important;
        }
    }

    //-------------------- Animations --------------------//

    #{generate-class-name($titon-off-canvas)} {
        @if (is-feature-enabled("all-animations") or (index($titon-off-canvas-animations, "on-top") or index($titon-off-canvas-animations, "squish"))) {
            &.on-top,
            &.squish {
                #{$titon-off-canvas-class-sidebar} {
                    z-index: 3;
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-off-canvas-animations, "push-reveal")) {
            &.push-reveal {
                #{$titon-off-canvas-class-sidebar-left} {
                    transform: translate3d(-$titon-off-canvas-width, 0, 0);
                }

                #{$titon-off-canvas-class-sidebar-right} {
                    transform: translate3d($titon-off-canvas-width, 0, 0);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-off-canvas-animations, "reverse-push")) {
            &.reverse-push {
                #{$titon-off-canvas-class-sidebar-left} {
                    transform: translate3d($titon-off-canvas-width, 0, 0);
                }

                #{$titon-off-canvas-class-sidebar-right} {
                    transform: translate3d(-$titon-off-canvas-width, 0, 0);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-off-canvas-animations, "reveal")) {
            &.reveal {
                #{$titon-off-canvas-class-sidebar} {
                    transform: translate3d(0, 0, 0);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-off-canvas-animations, "push-down")) {
            &.push-down {
                #{$titon-off-canvas-class-sidebar-left},
                #{$titon-off-canvas-class-sidebar-right} {
                    transform: translate3d(0, -100%, 0);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or (
            index($titon-off-canvas-animations, "push") or
            index($titon-off-canvas-animations, "push-reveal") or
            index($titon-off-canvas-animations, "push-down") or
            index($titon-off-canvas-animations, "reverse-push") or
            index($titon-off-canvas-animations, "reveal")
        )){
            &.push,
            &.push-reveal,
            &.push-down,
            &.reverse-push,
            &.reveal {
                &.move-left {
                    #{$titon-off-canvas-class-content} {
                        transform: translate3d(-$titon-off-canvas-width, 0, 0);
                    }
                }

                &.move-right {
                    #{$titon-off-canvas-class-content} {
                        transform: translate3d($titon-off-canvas-width, 0, 0);
                    }
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-off-canvas-animations, "squish")) {
            &.squish {
                &.move-left {
                    #{$titon-off-canvas-class-content} {
                        padding-right: $titon-off-canvas-width;
                    }
                }

                &.move-right {
                    #{$titon-off-canvas-class-content} {
                        padding-left: $titon-off-canvas-width;
                    }
                }
            }
        }
    }
}
